<template>
  <div class="top_nav">
    <ul class="list">
      <li> <router-link to="/friend">发现音乐</router-link></li>
      <li><router-link to="/my">我的音乐</router-link></li>
      <li><router-link to="/part">朋友</router-link></li>
      <li> <router-link to="shangcheng">商城 </router-link></li>
      <li> <router-link to="yyr">音乐人 </router-link></li>
      <li> <router-link to="xaked">下载客户端</router-link></li>

    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.top_nav {
  width: 100%;
  background-color: #a3a2a2;
}

.list {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

li {
  color: #fff;
  list-style: none;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

li:hover {
  background-color: rgb(13, 222, 230);
}
</style>